<template>
  <div id="app" v-cloak>
    <template v-if="list.length">
      <table align="center" width="90%">
        <thead>
        <tr>
          <th><input type="checkbox" @click='checkAll' :checked='allCheck'></th>
          <th>序号</th>
          <th>商品名称</th>
          <th>商品单价</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
        </thead>
          <Item :goodsName="list" @a="handleReduce" @b="handleAdd" @c="handleRemove" @d="checkAll" @e="singleCheck"/>
        <tfoot>
          <tr>
            <td colspan="6">总价 : ¥{{totalPrice}}</td>
          </tr>
        </tfoot>
      </table>
    </template>
    <div v-else>购物车为空</div>

  </div>
</template>

<script>
  import Item from './components/Item'
export default {
  data () {
    return {
      allCheck:false,
      list : [
        {
          id: 1 ,
          name :'iPhone 8 ',
          price: 6188 ,
          count: 1 ,
          isChecked : false
        },
        {
          id: 2 ,
          name :'小米 8 ',
          price: 5888 ,
          count: 1 ,
          isChecked : false
        },
        {
          id: 3 ,
          name :'iPad Pro ',
          price: 11000 ,
          count: 1 ,
          isChecked : false
        },
        {
          id: 4 ,
          name :'雷神SE9',
          price: 6188 ,
          count: 10 ,
          isChecked : false
        },
      ]
    }


  },
  computed : {
    //通过计算属性获取总价格
    totalPrice:function() {
      let total = 0;
      const newArr = this.list.filter(value => {
        return value.isChecked == true
      })
      for(var i = 0 ;i<newArr.length;i++) {
        total += this.list[i].price * this.list[i].count
      }
      //返回一个符合千分位格式的金额数
      //return total.toString().replace(/\B(?=(\d{3})+$)/g,',')
      return total
    }
  },
  methods : {
    //减法
    handleReduce:function(index) {
      if(this.list[index].count === 1) return ;
      this.list[index].count--;
    },
    //加法
    handleAdd:function(index) {
      this.list[index].count++
    },
    //移除
    handleRemove:function(index) {
      this.list.splice(index,1)
    },
    //全选
    checkAll() {
      this.allCheck = !this.allCheck
      this.list.forEach(value => {
        value.isChecked = this.allCheck
      })
    },
    //单选,当全部选中时,改变全选按钮的状态
    singleCheck(index) {
      this.list[index].isChecked = !this.list[index].isChecked
      const selectData = this.list.filter(value => {
        return value.isChecked == true
      })
      this.allCheck = selectData.length === this.list.length ? true : false
    }
  },
  components:{
    Item
  }

}
</script>

<style>
  [v-cloak] {
    display: none;
  }
  table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
  }
  th,td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
  }
  th {
    background: yellowgreen;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
  }
</style>
